<template>
  <div class="new-activity-page" v-loading="loading">
    <el-breadcrumb class="breadcrumb page-title" separator="/">
      <span @click="$router.push('newCustomerActivity')" class="el-breadcrumb__inner is-link">Activity</span>
      <span>/</span>
      <span role="link" class="el-breadcrumb__inner">new</span>
    </el-breadcrumb>
    <div class="container-padding">
      <el-form label-position="top" :rules="activityRules" :model="Form" ref="ruleForm" size="mini">
        <el-form-item label="Status" style="width: 200px;" prop="statusId">
          <el-select style="width: 200px" v-model="Form.statusId" :value="Form.statusId" placeholder="">
            <el-option v-for="item in statusOption" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Activity Time" style="width: 200px;" prop="date">
          <el-date-picker
            style="width:200px;"
            v-model="Form.date"
            type="date"
            placeholder="">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="Activity Type" style="width: 200px;" prop="activityTypeId">
          <el-select style="width: 200px" v-model="Form.activityTypeId" :value="Form.activityTypeId" placeholder="">
            <el-option v-for="i in activityTypeOption" :key="i.value" :label="i.text" :value="i.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Objective" prop="type">
          <div>
            <el-checkbox-group v-model="Form.type">
              <el-checkbox label="1" name="type" style="margin-right: 30px">Introduction</el-checkbox>
              <el-checkbox label="2" name="type">Make appointment</el-checkbox>
              <el-checkbox label="3" name="type">Software installation</el-checkbox>
              <el-checkbox label="4" name="type">Training</el-checkbox>
              <el-checkbox label="5" name="type">Software troubleshooting</el-checkbox>
              <el-checkbox label="6" name="type">Complaint</el-checkbox>
              <el-checkbox label="8" name="type">Data update</el-checkbox>
              <div class="other" style="width: 300px">
                <el-checkbox label="7" name="type" @change="showTextArea=!showTextArea">Others</el-checkbox>
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder=""
                  v-model="Form.otherObjectives"
                v-show="showTextArea">
                </el-input>
              </div>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="Notes" style="width: 300px;">
          <el-input
            type="textarea"
            :rows="4"
            placeholder=""
            v-model="Form.notes">
          </el-input>
        </el-form-item>
        <el-form-item style="margin-top: 37px;">
          <el-button @click="save" size="medium" type="warning" style="width:140px">Save
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {userActivityDetail, userActivityAdd} from '../../api/guc_api.js'
  import qs from 'qs';

  export default {
    name: 'newCustomerActivity',
    data() {
      return {
        Form: {
          id: '',
          landlordId: '',
          statusId: '',
          date: '',
          activityTypeId: '',
          type: [],
          notes: '',
          otherObjectives: '',
          //显示输入框
          showTextArea:false
        },
        statusOption: [
          {
            value: 1,
            label: "Active"
          },
          {
            value: 2,
            label: "Deleted"
          }
        ],
        activityTypeOption: [
          {
            value: 1,
            text: "Call"
          },
          {
            value: 2,
            text: "Visit"
          },
          {
            value: 3,
            text: "Received call"
          },
        ],
        activityRules: {
          statusId: [
            {type: 'number', required: true, message: 'Please Select', trigger: 'change'}
          ],
          activityTypeId: [
            {type: 'number', required: true, message: 'Please Select', trigger: 'change'}
          ],
          type: [
            {type: 'array', required: true, message: 'Please Select', trigger: 'change'}
          ],
          date: [
            {type: 'date', required: true, message: 'Please Select', trigger: 'change'}
          ],
        },
        loading:false
      }
    },
    methods: {
      dateFormat(value) {
        let date = new Date(value)
        let Y = date.getFullYear()
        let m = date.getMonth() + 1
        let d = date.getDate()
        let H = date.getHours()
        let i = date.getMinutes()
        let s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        let t = Y + '-' + m + '-' + d + ' ' + H + ':' + m + ':' + s
        return t
      },
      save() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            let Form = {
              id: this.Form.id,
              landlordId: this.Form.landlordId,
              status: this.Form.statusId,
              activityTime: this.Form.date ? this.dateFormat(this.Form.date) : '',
              activityType: this.Form.activityTypeId,
              objectives: this.Form.type ? this.Form.type.join(',') : '',
              content: this.$translateLang(this.Form.notes, 'zawgyiTounicode') || '',
            };
            if (this.Form.type.length > 0) {
              this.Form.type.forEach((value) => {
                if (value === '7') {
                  Form.otherObjective = this.Form.otherObjectives;
                }
              })
            }
            Form = qs.stringify(Form)
            //新增时提交
            this.loading=true
            if (!this.Form.id) {
              userActivityAdd(Form).then((res) => {
                // 表单重置
                // console.log(res)
                this.loading=false
                if (res.data.errorID === 0) {
                  //提示新建成功
                  this.messageToastSuccess('New Create Success')
                  //跳转到shopUserView页面
                  this.$router.push({
                    path: '/shopUserView',
                    query: {
                      id: this.Form.landlordId
                    }
                  })
                }
                else {
                  this.messageToastErr(res.data.message)
                }
              })
                .catch(error=>{
                  this.loading=false
                  console.log(error)
                })
            }
            //编辑时提交
            else {
              this.loading=true
              userActivityAdd(Form).then((res) => {
                this.loading=false
                // console.log(res)
                if (res.data.errorID === 0) {
                  //提示新建成功
                  this.messageToastSuccess('Edit Success')
                  //跳转到shopUserView页面
                  this.$router.push({
                    path: '/shopUserView',
                    query: {
                      id: this.Form.landlordId
                    }
                  })
                }
                else {
                  this.messageToastErr(res.data.message)
                }
              })
                .catch(error=>{
                  this.loading=false
                  this.loading=false
                  console.log(error)
                })
            }
          }
        });
      },
      // message alert 用于前端错误提示信息
      messageToastErr(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 5000,
          type: 'error'
        })
      },
      messageToastSuccess(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 5000,
          type: 'success'
        })
      },
      // 获取详情
      initForm() {
        this.loading=true
        let params = {id: this.Form.id}
        userActivityDetail(params).then(res => {
          this.loading=false
          if (res.data.errorID === 0) {
            let obj = res.data.object
            this.Form.statusId = obj.status
            this.Form.date = new Date(obj.activityTime)
            this.Form.activityTypeId = obj.activityType
            this.Form.notes =  this.$translateLang(obj.content, 'unicodeTozawgyi')
            //初始化复选框，字符串变数组
            this.Form.type = obj.objectives.split(',')
            this.Form.otherObjectives = obj.otherObjective
          }
          else {
            this.messageToastErr(res.data.message)
          }
        })
          .catch(error => {
            this.loading=false
            console.log(error)
          })
      },
    },
    mounted() {
      window.scrollTo(0,0)
      this.Form.landlordId = this.$route.query.landlordId;
      if (this.$route.query.id) {
        this.Form.id = this.$route.query.id || '';
        this.initForm()
      }
      else {
        this.Form.date = new Date()
      }
    }
  }
</script>

<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6 !important;
    font-size: 20px !important;
  }

  .breadcrumb {
    margin-bottom: 20px;
  }

  .container-padding {
    padding: 0 40px;
  }

  .new-activity-page .el-checkbox + .el-checkbox {
    margin-left: 0 !important;
    margin-right: 30px !important;
  }
</style>
